<template>
  <div class="social-container">
    <div class="app-container">
      <h2>
        .sync修饰符
      </h2>
      <!--  父组件将值传递给子组件, 子组件又要通知父组件修改传递过来的值就可以使用 .sync修饰符
        1. 父传子
        2. 子组件props接收
        3. 子组件发布自定义事件
        4. 父组件绑定自定义事件并修改父组件的值

        以上这四步可以使用.sync修饰符 简化操作 .sync修饰符就是一个语法糖
         1. 父传子 的 加上.sync修饰符
         2. 子组件props接收
         3. 子组件发布自定义事件 update:修改的属性  并携带要修改的值
         4. 不需要做了 会自动将这个修改的属性同步给父组件
      -->
      <hr>
      <!-- <son :msg="msg" @changmsg="changemsg" /> -->
      <son :msg.sync="msg" />
      <p ref="p">{{ msg }}</p>
      <button @click="fn">change</button>
    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Social',
  components: {
    Son
  },
  data() {
    return {
      msg: 'hello boy'
    }
  },
  beforeUpdate() {
    // console.log(this.msg)
    console.log(112121212121)
    this.msg = 345
    console.log(this.$refs.p.innerHTML)
  },
  updated() {
    // console.log(this.msg)
    this.msg = 888
    console.log(this.$refs.p.innerHTML)
  },
  methods: {
    changemsg(str) {
      this.msg = str
    },
    fn() {
      // this.msg = 0
    }
  }

}
</script>

<style>

</style>
